import { generateSecureRandom  } from "react-native-securerandom";
import React, { useState } from 'react';
import {
  Text,
  TouchableOpacity,
  View,
  TextInput,
  ScrollView,
  StyleSheet,
  Button
} from 'react-native';
import {
  Tester,
  TestSuite,
  TestCase
} from '@rnoh/testerino';

export function SecureRandomDemo(number: number): JSX.Element {
  const [size, setSize] = useState('');
  const titleText = `Random Test ${number}`;
  const [num, setNum] = useState('');
  const [secureRandom, setSecureRandom] = useState('')
  return (    
    <Tester style={{ flex: 1 }}>
      <TestSuite name="securerandom">               
        <TestCase
          itShould="secure random"
          tags={['Se_Ra']}>
              <>
              {/* 输入长度 */}
              <TextInput
                style={styles.TextInput}
                value={size}
                placeholder='输入4位有效数字'
                maxLength={4}
                onChangeText={s => {
                  setSize(s);
                }}></TextInput>

              <Text>生成的随机数数量：{num}</Text>
              <ScrollView style={{ height: 60,borderColor: '#000',  borderWidth: 1, }}>
                <Text>{secureRandom}</Text>
              </ScrollView>

              <TouchableOpacity
                onPress={() => {
                  generateSecureRandom(Number(size)).then((myRandom:any) => {                    
                    setSecureRandom(`${JSON.stringify(myRandom?.data)}`);                  
                    setNum(Object.keys(myRandom?.data).length+'');
                  }).catch((err)=>{
                    console.log(err,'err');
                    setNum('');
                    setSecureRandom(``);   
                  })
                }}
                style={styles.btn}>
                <Text style={styles.btnText}>Secure Random</Text>
              </TouchableOpacity>
              </>
         </TestCase>
      </TestSuite>
     </Tester> 
  );
}

const styles = StyleSheet.create({
  TextInput: {
    height: 40,
    borderColor: '#000',
    borderWidth: 1,
    borderRadius: 4,
    width: '90%',
    backgroundColor: '#fff'
  },
  btn: {
    borderRadius: 6,
    height: 36,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    backgroundColor: 'rgb(61, 176, 236)',
  },
  btnText: { fontWeight: 'bold', color: '#fff', fontSize: 20 },
});

export const displayName = 'Securerandom';
export const framework = 'React';
export const category = 'UI';
export const title = 'react-native-securerandom';
export const documentationURL = 'https://github.com/mxck/react-native-material-menu';
export const description = 'React Native securerandom';

export const examples = [
    {
        title: 'react-native-material-menu',
        render: function (): any {
            return <SecureRandomDemo number={30} />;
        },
    },
];